<template>
  <Scrollable ref="scrollableRef">
    <!-- 动态组件，根据controlModel生成多个控件 -->
    <component
      :is="item.component || 'div'"
      v-for="(item, index) of controlModel"
      :key="index"
      class="flex-none"
      v-bind="{
        device,
        floating,
      }"
    >
      <template #default="{ loading = false, trigger } = {}">
        <!-- 根据item配置生成的按钮 -->
        <el-button
          type="primary"
          plain
          class="!border-none !mx-0 bg-transparent !rounded-0"
          :disabled="device.$unauthorized"
          :title="$t(item.tips || item.label)"
          :loading="loading"
          @click="handleClick(item, trigger || item.trigger)"
        >
          <template #icon>
            <!-- 根据item配置动态生成图标 -->
            <svg-icon
              v-if="item.svgIcon"
              :name="item.svgIcon"
              :class="item.iconClass"
            ></svg-icon>
            <el-icon v-else-if="item.elIcon" :class="item.iconClass">
              <component :is="item.elIcon" />
            </el-icon>
          </template>
          <!-- 显示国际化后的标签文本 -->
          {{ $t(item.label) }}
        </el-button>
      </template>
    </component>
  </Scrollable>

  <!-- 下一个按钮，触发handleNext方法 -->
  <el-button
    type="primary"
    class="el-button-nav"
    title="Next"
    @click="handleNext"
  >
    <el-icon>
      <CaretRight />
    </el-icon>
  </el-button>
</template>

<script>
// 导入各个功能组件
// <!-- 导入应用主组件 -->
import Application from './Application/index.vue'
// <!-- 导入文件管理组件 -->
import FileManage from './FileManage/index.vue'
// <!-- 导入Gnirehtet组件，用于实现特定功能-->
import Gnirehtet from './Gnirehtet/index.vue'
// <!-- 导入Synergy组件，用于实现协同操作功能 -->
import Synergy from './Synergy/index.vue'
// <!-- 导入Rotation组件，可能用于界面旋转或轮播功能 -->
import Rotation from './Rotation/index.vue'
// <!-- 导入Screenshot组件，用于截图功能 -->
import Screenshot from './Screenshot/index.vue'
// <!-- 导入Shell组件，可能用于提供一个终端界面 -->
import Shell from './Shell/index.vue'
// <!-- 导入Tasks组件，可能用于任务管理或展示 -->
import Tasks from './Tasks/index.vue'
// <!-- 导入Volume组件，用于控制音量 -->
import Volume from './Volume/index.vue'

// 定义Vue组件
export default {
  components: {
    Screenshot,
    Application,
    Gnirehtet,
    Synergy,
    Rotation,
    Volume,
    FileManage,
    Shell,
    Tasks,
  },
  props: {
    // 设备信息属性，用于传递给子组件
    device: {
      type: Object,
      default: () => ({}),
    },
    // 是否浮动属性，用于控制某些功能的显示
    floating: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  computed: {
    // 根据设备信息和浮动状态计算控制模型
    controlModel() {
      const value = [
        // 控制模型项，每个项定义了一个控制按钮的属性和行为
        {
          // 切换设备控制命令
          label: 'device.control.switch',
          elIcon: 'Switch',
          command: 'input keyevent 187',
        },
        {
          // 返回主页设备控制命令
          label: 'device.control.home',
          svgIcon: 'home',
          command: 'input keyevent 3',
        },
        {
          // 返回上一页设备控制命令
          label: 'device.control.return',
          elIcon: 'Back',
          command: 'input keyevent 4',
        },
        {
          // 关闭设备屏幕功能
          label: 'device.control.turnScreenOff',
          elIcon: 'TurnOff',
          tips: 'device.control.turnScreenOff.tips',
          trigger: () => {
            // 使用scrcpy辅助工具关闭设备屏幕
            window.scrcpy.helper(this.device.id, '--turn-screen-off')
          },
        },
        {
          // 打开通知栏设备控制命令
          label: 'device.control.notification',
          elIcon: 'Notification',
          command: 'cmd statusbar expand-notifications',
          tips: 'device.control.notification.tips',
        },
        {
          // 电源键设备控制命令
          label: 'device.control.power',
          elIcon: 'SwitchButton',
          command: 'input keyevent 26',
          tips: 'device.control.power.tips',
        },
        {
          // 屏幕旋转控制
          label: 'device.control.rotation.name',
          svgIcon: 'rotation',
          component: 'Rotation',
        },
        {
          // 音量控制
          label: 'device.control.volume.name',
          svgIcon: 'volume-up',
          component: 'Volume',
        },
        {
          // 截图功能
          label: 'device.control.capture',
          elIcon: 'Crop',
          component: 'Screenshot',
        },
        {
          // 重启设备控制命令
          label: 'device.control.reboot',
          elIcon: 'RefreshLeft',
          command: 'reboot',
        },
        {
          // 安装应用功能
          label: 'device.control.install',
          svgIcon: 'install',
          component: 'Application',
        },
        {
          // 文件管理功能
          label: 'device.control.file.name',
          svgIcon: 'file-send',
          component: 'FileManage',
          hiddenKeys: ['floating'],
        },
        {
          // Shell命令行功能
          label: 'device.control.shell.name',
          svgIcon: 'command',
          component: 'Shell',
          tips: 'device.control.shell.tips',
          hiddenKeys: ['floating'],
        },
        {
          // 任务管理功能
          label: 'device.task.name',
          elIcon: 'Clock',
          component: 'Tasks',
          hiddenKeys: ['floating'],
        },
        {
          // Gnirehtet功能，用于设备网络共享
          label: 'device.control.gnirehtet',
          elIcon: 'Link',
          component: 'Gnirehtet',
          tips: 'device.control.gnirehtet.tips',
        },
        {
          // 屏幕镜像功能
          label: 'device.control.mirror-group.name',
          svgIcon: 'multi-screen',
          iconClass: '',
          component: 'Synergy',
          tips: 'device.control.mirror-group.tips',
          hiddenKeys: ['floating'],
        },
      ]

      // 过滤掉根据当前属性不应该显示的项
      const handler = item =>
        !(item.hiddenKeys || []).some(key => this.$props[key])

      return value.filter(item => handler(item))
    },
  },
  methods: {
    // 处理上一个按钮点击事件
    handlePrev() {
      this.$refs.scrollableRef.scrollBackward()
    },
    // 处理下一个按钮点击事件
    handleNext() {
      this.$refs.scrollableRef.scrollForward()
    },
    // 处理控制按钮点击事件
    handleClick(row, trigger) {
      if (trigger) {
        trigger(row)
        return false
      }

      if (row?.command) {
        this.$adb.deviceShell(this.device.id, row.command)
      }
      else if (row?.scrcpyCommand) {
        this.$scrcpy.control(this.device.id, { command: row.scrcpyCommand })
      }
    },
  },
}
</script>

<style lang="postcss" scoped>
.el-button.is-disabled {
  @apply !dark:bg-gray-800;
}

.el-button.el-button-nav {
  @apply flex-none p-0 rounded-none border-0 h-full flex items-center justify-center opacity-0 bg-primary-100 dark:bg-gray-800 !hover:bg-primary-300 active:bg-primary-500 text-primary-600 hover:text-white w-4 group-hover:opacity-100 transition-opacity;
}
</style>
